<template>

  <form>

<!--    视频上传主体-->
    <div class="acscd">
      <p class="wqca">文件上传</p>
      <a href="javascript:void (0);" class="file">选择视频
        <input type="file" name="video_file" id="video" required accept="video/mp4">
      </a>
      <hr style="height: 1px;border: none;border-top: 1px solid deepskyblue;margin-right: 40%"/>
      <p class="wqca">基本信息</p>
      <p>视频封面设置</p>
      <div class="imga">
        <a href="javascript:void (0);" class="file">选择封面
          <input type="file" name="video_pic" id="image" required @change="changeCover" accept="image/jpeg">
        </a>
        <div class="bnm">
          <img :src="coversrc" alt="" class="bnm">
        </div>
      </div>
      <p class="avc">*标题</p>
      <div class="input-group mb-3">
        <input name="title" type="text" style="margin-right:40%" class="form-control" placeholder="请输入标题" required>
      </div>
      <p class="avc">*分类</p>
      <div class="input-group mb-3">
        <select style="margin-right:40%" class="form-control" placeholder="请输入标题" name="main_tag_id">
          <option value="1">学习</option>
          <option value="2">科技</option>
          <option value="3">生活</option>
          <option value="4">运动</option>
          <option value="5">游戏</option>
          <option value="6">娱乐</option>
          <option value="7">艺术</option>
        </select>
      </div>
      <template v-if="false">
        <p class="avc">*标签</p>
        <div class="input-group mb-3">
          <input type="text" style="margin-right:40%" class="form-control" placeholder="请输入标签" name="new_tag_titles">
        </div>
        <div>
          <p>推荐标签：</p>
          <button type="button" class="btn btn-outline-secondary" name="sub_tag_ids">搞笑</button>
          <!--        <button type="button" class="btn btn-outline-secondary">娱乐</button>
                  <button type="button" class="btn btn-outline-secondary">逗比</button>
                  <button type="button" class="btn btn-outline-secondary">搞笑视频</button>
                  <button type="button" class="btn btn-outline-secondary">生活</button>
                  <button type="button" class="btn btn-outline-secondary">舞蹈</button>
                  <button type="button" class="btn btn-outline-secondary">娱乐</button>
                  <button type="button" class="btn btn-outline-secondary">娱乐</button>
                  <button type="button" class="btn btn-outline-secondary">娱乐</button>
                  <button type="button" class="btn btn-outline-secondary">娱乐</button>-->
        </div>
      </template>
      <p class="avc">*视频描述</p>
      <textarea name="desc" style="min-height:100px;min-width:60%;max-height:100px;max-width:60%;word-break:break-all;" placeholder="请输入视频简介"></textarea>
<!--      <p>视频时长 </p>-->
<!--      <p>标签id</p>-->
<!--      <p>sessionKey</p>-->
<!--      <p>uuid {{uuid}}</p>-->
      <input type="hidden" name="sessionKey" value="123">
      <input type="hidden" name="length" value="0">
      <input type="hidden" v-model="uuid" name="uuid">
    </div>
<!--    上传按钮-->
    <div class="acsc">
      <button class="button2" type="button" @click="submit">上传</button>
    </div>
<!--    取消按钮-->
    <div class="acscm">
      <button class="button3" type="reset">取消</button>
    </div>
  </form>

</template>

<!--重构script-->
<script setup lang="ts">
import {computed, inject, onMounted, ref, Ref, watch} from "vue";
import request from "@/hooks/request";

const aComponent = inject('aComponent')
const changeComponent = inject('changeComponent')
const uuid=inject<Ref<number>>('uuid')

/*
const  file=new FormData(document.forms[1]).get('video_file')
let url=URL.createObjectURL(file)
let  v=new HTMLVideoElement()
v.src=url
console.log(v.duration,'__________',new Date())
v.addEventListener('loadedmetadata',()=>{
  console.log(v.duration,'______________',new Date())
})
*/


const submit = () => {
if (!document.forms[1].checkValidity()){
  alert('请把信息填写完整')
  return
}

  let formData=new FormData(document.forms[1])
  let file=formData.get('video_file')

  if (file)
  {
    let url=URL.createObjectURL(file)
    let  v=new Audio(url)
    v.addEventListener('loadedmetadata',()=>{
      console.log(v.duration)
      formData.set('length',v.duration.toFixed(0).toString())
      formData.forEach((value,key,parent)=>{
        console.log(value,key)
      })
      request.post('video/upload',null,formData).then(resp=>{
        if (resp.obj){
          alert('上传成功')
          document.forms[1].reset()
        }else {
          alert('上传失败')
        }
      })
    })
    v.addEventListener('error',()=>{
      alert('视频无法被解码，请更换视频源')
    })
  }
}

  /*data.forEach((value,key,parent)=>{
    console.log(value,key)
  })
  */
const coversrc=ref('')
const changeCover=async ()=>{
  let coverfile=new FormData(document.forms[1]).get('video_pic')
  coversrc.value=URL.createObjectURL(coverfile)
}

</script>

<style scoped>
.acscd{
  margin-top: 20px;
  margin-left: 28%;
}
.button1{
  font-size: 20px;
  background-color: dodgerblue;
  padding: 8px;
  color: white;
}
.wqca{
  font-size: 25px;
  color: black;
  font-weight: bold;
}

.plo{
  font-size: 30px;
}
.avc{
  margin-top: 8px;
}
.button2{
  font-size: 20px;
  background-color: dodgerblue;
  padding: 8px;
  color: white;
  width: 120px;
  height: 50px;
}
.acsc{
  margin-top: 30px;
  margin-left: 28%;
}
.acscm{
  margin-top: -50px;
  margin-left: 38%;
}
.button3{
  font-size: 20px;
  background-color: #b6effb;
  padding: 8px;
  color: white;
  width: 120px;
  height: 50px;
}
.file {
  position: relative;
  display: inline-block;
  background: #D0EEFF;
  border: 1px solid #99D3F5;
  border-radius: 4px;
  padding: 4px 12px;
  overflow: hidden;
  color: #1E88C7;
  text-decoration: none;
  text-indent: 0;
  line-height: 20px;
}
.file input {
  position: absolute;
  font-size: 100px;
  right: 0;
  top: 0;
  opacity: 0;
}
.file:hover {
  background: #AADFFD;
  border-color: #78C3F3;
  color: #004974;
  text-decoration: none;
}
.bnm{
  background-color: black;
  width: 400px;
  height: 400px;
}

.imgaa{
  margin-left:20%;
}
.bit{
  font-size: 38px;
  font-weight: bold;
  margin-left: 45%;
  margin-top: 500px;
}
.adc{
  padding-top: 50px;
  margin-left: 35%;
  margin-right: 40%;
}
.cvb{
  padding-top: 30px;
}
a{ text-decoration:none;
  color:white;
}
a:link {
  color:#3C3C3C;
  text-decoration:none;
}

a:hover {
  color:#FF00FF;
  text-decoration:none;
}
a:active {
  color:#D200D2;
  text-decoration:none;
}

</style>


